<script>
  import { getContext } from 'svelte';
  const ctx = getContext('iconCtx') ?? {};
  let className = ctx.class || '';
  export { className as class };
  export let size = ctx.size || '24';
  export let role = ctx.role || 'img';
  export let color = ctx.color || 'currentColor';
  export let withEvents = ctx.withEvents || false;
  export let ariaLabel = 'mirror logo';
  export let title = {
    id: `mirror-logo-title-${Math.random().toString(36).substring(7)}`,
    title: ariaLabel,
  };
  export let desc = {
    id: `mirror-logo-desc-${Math.random().toString(36).substring(7)}`,
    desc: 'A mirror logo icon',
  };
  let ariaDescribedby = `${title.id || ''} ${desc.id || ''}`;
  let hasDescription = false;
  $: if (title.id || desc.id) {
    hasDescription = true;
  } else {
    hasDescription = false;
  }
</script>

{#if withEvents}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    {...$$restProps}
    {role}
    width={size}
    height={size}
    class={className}
    aria-label={ariaLabel}
    aria-describedby={hasDescription ? ariaDescribedby : undefined}
    viewBox="0 0 24 32"
    on:click
    on:keydown
    on:keyup
    on:focus
    on:blur
    on:mouseenter
    on:mouseleave
    on:mouseover
    on:mouseout>
    {#if title.id && title.title}
      <title id={title.id}>{title.title}</title>
    {/if}
    {#if desc.id && desc.desc}
      <desc id={desc.id}>{desc.desc}</desc>
    {/if}

    <mask id="mask0_356_1412" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="32">
      <path d="M23.8462 0.275391H0V31.1351H23.8462V0.275391Z" fill="white" />
    </mask>
    <g mask="url(#mask0_356_1412)">
      <path d="M23.2482 0.94043H0.939453V30.7546H23.2482V0.94043Z" fill="url(#pattern0_356_1412)" fill-opacity="0.5" />
      <path
        d="M11.9225 1.06735C17.735 1.06735 23.0298 6.41457 23.0298 12.2833L22.8352 30.1157L22.4462 29.7228L23.8155 31.1055V12.2852C23.8147 7.42843 20.9174 3.05012 16.4739 1.19123C12.0304 -0.667657 6.91552 0.358803 3.5136 3.79213C2.86893 4.44285 2.29985 5.16568 1.81738 5.94661L2.44679 6.58218C4.2682 3.41446 8.03368 1.06735 11.9225 1.06735Z"
        fill={color} />
      <path
        d="M0.02835 31.1071H23.8162L22.8356 30.1173H1.00886V12.2849C1.00886 10.3423 1.54478 8.14861 2.44591 6.58186L1.81587 5.94629C0.642001 7.84784 0.0221892 10.0448 0.027376 12.2856L0.02835 31.1071Z"
        fill={color} />
    </g>
    <defs>
      <pattern id="pattern0_356_1412" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#image0_356_1412" transform="scale(0.00140647 0.0010627)" />
      </pattern>
      <image
        id="image0_356_1412"
        width="711"
        height="941"
        xlink:href="" />
    </defs>
  </svg>
{:else}
  <svg
    xmlns="http://www.w3.org/2000/svg"
    {...$$restProps}
    {role}
    width={size}
    height={size}
    class={className}
    aria-label={ariaLabel}
    aria-describedby={hasDescription ? ariaDescribedby : undefined}
    viewBox="0 0 24 32">
    {#if title.id && title.title}
      <title id={title.id}>{title.title}</title>
    {/if}
    {#if desc.id && desc.desc}
      <desc id={desc.id}>{desc.desc}</desc>
    {/if}

    <mask id="mask0_356_1412" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="32">
      <path d="M23.8462 0.275391H0V31.1351H23.8462V0.275391Z" fill="white" />
    </mask>
    <g mask="url(#mask0_356_1412)">
      <path d="M23.2482 0.94043H0.939453V30.7546H23.2482V0.94043Z" fill="url(#pattern0_356_1412)" fill-opacity="0.5" />
      <path
        d="M11.9225 1.06735C17.735 1.06735 23.0298 6.41457 23.0298 12.2833L22.8352 30.1157L22.4462 29.7228L23.8155 31.1055V12.2852C23.8147 7.42843 20.9174 3.05012 16.4739 1.19123C12.0304 -0.667657 6.91552 0.358803 3.5136 3.79213C2.86893 4.44285 2.29985 5.16568 1.81738 5.94661L2.44679 6.58218C4.2682 3.41446 8.03368 1.06735 11.9225 1.06735Z"
        fill={color} />
      <path
        d="M0.02835 31.1071H23.8162L22.8356 30.1173H1.00886V12.2849C1.00886 10.3423 1.54478 8.14861 2.44591 6.58186L1.81587 5.94629C0.642001 7.84784 0.0221892 10.0448 0.027376 12.2856L0.02835 31.1071Z"
        fill={color} />
    </g>
    <defs>
      <pattern id="pattern0_356_1412" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#image0_356_1412" transform="scale(0.00140647 0.0010627)" />
      </pattern>
      <image
        id="image0_356_1412"
        width="711"
        height="941"
        xlink:href="" />
    </defs>
  </svg>
{/if}
